<template>
  <div class="avatar">
    <div :class="cn(avatarVariants({ size, visual, modifier }), props.class)">
      <img :src="src" :alt="alt" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { cva } from "class-variance-authority";
import { cn } from "@/components/utils";

import type { Size, AvatarVisual, AvatarModifier } from "./types";

interface Props {
  src: string;
  alt?: string;
  class?: string;
  size?: Size;
  visual?: AvatarVisual;
  modifier?: AvatarModifier;
}
const props = defineProps<Props>();

const avatarVariants = cva("", {
  variants: {
    size: {
      xs: "w-4",
      sm: "w-6",
      md: "w-12",
      lg: "w-24",
      xl: "w-32",
    },
    visual: {
      circle: "rounded-full",
      squircle: "mask mask-squircle",
      hexagon: "mask mask-hexagon",
      triangle: "mask mask-triangle",
    },
    modifier: {
      online: "avatar-online",
      offline: "avatar-offline",
      placeholder: "avatar-placeholder",
    },
  },
  defaultVariants: {},
});
</script>
